<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" @keydown="search" shape='round' />
    <div class="search_wrap" v-if="resultList.length===0">
      <p class="hot_title">热门搜索</p>
      <div class="hot_name_wrap">
        <span class="hot_item" v-for="(obj,index) in hotList" :key="index" @click="btn(obj.first)">{{obj.first}}</span>
      </div>
    </div>
    <div class="search_wrap" v-else>
      <p class="hot_title">最佳匹配</p>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell inset v-for="obj in resultList" :key="obj.id" :title="obj.name" :label="obj.ar[0].name+' - '+obj.name"
          center>
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.6rem" @click="playfn(obj.id)"/>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchAPI, SearchAPI } from "@/api";
export default {
  data() {
    return {
      value: '',
      hotList: '',
      resultList: [],
      finished: false,
      loading: false,
      page: 1,
      timer: null,
      result:''
    };
  },
  async created() {
    const { data: { result: res } } = await hotSearchAPI({

    })
    this.hotList = res.hots
  },
  methods: {
    btn(val) {
      this.page = 1
      this.finished = false
      this.value = val
      this.getList()
    },
    async getList() {
      this.loading = false
      const { data: { result: { songs: res } } } = await SearchAPI({
        limit: 20,
        offset: (this.page - 1) * 20,
        keywords: this.value
      })
      this.resultList = [...this.resultList, ...res]
      console.log(res)
      this.result=res
    },
    search() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.finished = false
        if (!this.value) return
        this.getList()
      }, 1000)
    },
    onLoad() {
      this.page++
      this.getList()
      if (this.result.length===0) {
        this.finished = true
        this.loading = false
        return
      }
    },
    playfn(id){
      this.$router.push({
        path:'/play',
        query:{
          id,
        }
      })
    }
  }
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}
</style>